<template>
	<view class="container">
		<view class="form">
			<!-- <view class="form-one d-rn d-ac d-jb">
				<text class="text">发起人</text>
				<text class="text2">
					<span v-if="info.employerName">{{info.employerName}}</span>
					<span v-if="info.positionName">{{info.positionName}}</span><span v-if="info.positionName && info.employerDeptName">/</span><span v-if="info.employerDeptName">{{info.employerDeptName}}</span>
				</text>
			</view> -->
			<view class="form-one d-rn d-ac d-jb">
				<text class="text">{{ $t('type') }}</text>
				<text class="text">{{ info.vacationName }}</text>
			</view>
			<view class="form-one d-rn d-ac d-jb" v-if="info.leaveStartDate">
				<text class="text">{{ $t('start_time') }}</text>
				<text class="text">{{ info.leaveStartDate }}</text>
			</view>
			<view class="form-one d-rn d-ac d-jb" v-if="info.leaveEndDate">
				<text class="text">{{ $t('end_time') }}</text>
				<text class="text">{{ info.leaveEndDate }}</text>
			</view>
			<view class="form-one d-rn d-ac d-jb" v-if="info.leaveDays">
				<text class="text">{{ $t('leave_duration') }}</text>
				<text class="text2">{{ info.leaveDays || 0 }}{{ $t('days') }}</text>
			</view>
			<view class="form-two" v-if="info.leaveReason">
				<text class="text">{{ $t('leave_reason1') }}:</text>
				<text class="text txt-cut">{{ info.leaveReason }}</text>
			</view>
			<view class="form-two" v-if="info.leaveFile">
				<text class="text">{{ $t('attachment') }}:</text>
				<image v-if="info.leaveFile" :src="info.leaveFile" mode="widthFix" style="width: 100%;margin-top:10rpx">
				</image>
			</view>
			<view class="form-two" v-if="info.leaveState == 2">
				<text>{{ $t('cancel_reason') }}</text>
				<textarea :disabled="info.status == 2" name="" id="" cols="30" rows="10" :placeholder="$t('please_fill_in')"
					placeholder-style="color:#CCCCCC;" v-model="form.reason" maxlength="200"></textarea>
			</view>
		</view>
		<view class="footer d-rn d-ac d-jc">

			<text class="d-rn d-ac d-jc" @click="applyCancelLeave(4)" v-if="info.leaveState == 2">{{ $t('cancel_apply_title') }}</text>
			<text class="d-rn d-ac d-jc" @click="handleSubmit(4)"
				v-if="info.leaveState == 0 || info.leaveState == 1">{{ $t('cancel_apply_title') }}</text>
		</view>
	</view>
</template>

<script>
var _self
import { cancel, applyCancelLeave } from '../../api/index.js'
export default {
	data() {
		return {
			info: {},
			form: {
				reason: '',
				state: '',
				approvarId: ''
			},
			roleName: uni.getStorageSync('roleName')
		}
	},
	onLoad(options) {
		_self = this;
		if (options && options.data) {
			_self.info = JSON.parse(options.data)
			_self.form.approvarId = _self.info.id
			console.log(this.info, 2)
		}
	},
	methods: {

		handleSubmit(type) {
			uni.showModal({
				title: this.$t('prompt'),
				content: this.$t('cancel_confirm'),
				success: (mode) => {
					if (mode.cancel) return;
					_self.form.state = type;
					let data = {
						// remark:this.form.reason,
						approvalFormId: this.info.approveId,
						auditStatus: type
					}
					cancel(data).then(res => {
						if (res.code == 200) {
							_self.$commonFun.showTips(res.msg);
							setTimeout(function () {
								uni.navigateBack({
									delta: 1,//返回层数，2则上上页
								})
							}, 2000);
						}
					})
				},
			});

		},
		applyCancelLeave(type) {
			uni.showModal({
				title: this.$t('prompt'),
				content: this.$t('cancel_confirm'),
				success: (mode) => {
					if (mode.cancel) return;
					_self.form.state = type;
					let data = {
						cancelReason: this.form.reason,
						employerLeaveId: this.info.id,
						// auditStatus:type
					}
					applyCancelLeave(data).then(res => {
						if (res.code == 200) {
							_self.$commonFun.showTips(res.msg);
							setTimeout(function () {
								uni.navigateBack({
									delta: 1,//返回层数，2则上上页
								})
							}, 2000);
						}
					})
				},
			});

		},

		// getformList(){
		// 	formList({
		// 		pageNum:_self.pageNum,
		// 		pageSize:_self.pageSize,
		// 	}).then(res=>{
		// 		if(res.code == 200){
		// 			_self.shenpiList = res.rows;
		// 			_self.total = res.total;
		// 		}
		// 	})
		// },


	}
}

</script>

<style lang="scss">
page {
	// background-color: #F5F5F5;
}

.container {
	width: 100%;


	.form {
		width: 100%;
		background-color: #ffffff;
		margin-top: 20rpx;

		&-one {
			padding: 25rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #F5F5F5;

			.text {
				font-size: 28rpx;
				color: #6c6c6c;
			}

			.text2 {
				font-size: 28rpx;
			}

			.uni-input {
				font-size: 28rpx;
			}
		}

		&-two {
			padding: 25rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #F5F5F5;

			text {
				font-size: 28rpx;
				color: #6c6c6c;
			}

			input {
				font-size: 28rpx;
				color: #CCCCCC;
				margin-top: 16rpx;
			}
		}
	}

	.list {
		width: 94%;
		margin: 24rpx auto;

		&-one {
			background-color: #ffffff;
			padding: 24rpx;
			box-sizing: border-box;
			margin-bottom: 24rpx;
			border-radius: 12rpx;

			&-one {
				&-title {
					margin-bottom: 16rpx;

					&-left {
						text:nth-of-type(1) {
							font-size: 36rpx;
							font-weight: bold;
							color: #333333;
							margin-right: 20rpx;
						}

						text:nth-of-type(2) {
							padding: 6rpx;
							box-sizing: border-box;
							font-size: 20rpx;
							font-weight: bold;
							color: #FF8F1F;
							background-color: #FFEFDF;
							border-radius: 12rpx;
						}
					}

					&-right {
						text {
							color: #CCCCCC;
						}
					}
				}

				&-content {
					padding-bottom: 24rpx;
					border-bottom: 1px dashed #D2D2D2;

					text {
						margin-bottom: 10rpx;
						color: #999999;
					}
				}

				&-sts {
					padding-top: 24rpx;
					box-sizing: border-box;

					text {
						font-weight: bold;
					}

					.activetext {
						color: #FFFFFF;
					}
				}

			}
		}
	}




	.footer {
		width: 100%;
		background-color: #ffffff;
		margin: 24rpx 0;
		box-sizing: border-box;
		position: fixed;
		bottom: 0%;
		left: 0%;

		text {
			width: 339rpx;
			height: 86rpx;

		}

		text:nth-of-type(1) {
			background: #ffffff;
			border: 1px solid #e5e5e5;
			border-radius: 2em;
			margin-right: 24rpx;
		}

		text:nth-of-type(2) {
			background: #FADE4E;
			border: 1px solid #FADE4E;
			border-radius: 2em;
		}
	}


}
</style>